<template>
  <div>
    <el-form :model="categoryId" :disabled="disabled" inline>
      <el-form-item label="一级分类">
        <el-select
          placeholder="请选择"
          v-model="categoryId.category1Id"
          @change="handler1(categoryId.category1Id)"
        >
          <el-option
            :label="category.name"
            v-for="category in List1"
            :key="category.id"
            :value="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          placeholder="请选择"
          v-model="categoryId.category2Id"
          @change="handler2(categoryId.category2Id)"
        >
          <el-option
            :label="category.name"
            :value="category.id"
            v-for="category in List2"
            :key="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          placeholder="请选择"
          v-model="categoryId.category3Id"
          @change="getCategroyList"
        >
          <el-option
            :label="category.name"
            :value="category.id"
            v-for="category in List3"
            :key="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List1: [],
      List2: [],
      List3: [],
      categoryId: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
      categoryList: [],
      disabled: false,
    };
  },
  created() {
    this.getCategroy1List();
  },
  methods: {
    async getCategroy1List() {
      const res = await this.$Api.attr.reqGetCategory1List();
      this.List1 = res.data;
    },
    async handler1(id) {
      this.List2 = [];
      this.List3 = [];
      this.categoryId.category2Id = "";
      this.categoryId.category3Id = "";
      const res = await this.$Api.attr.reqGetCategory2List(id);
      this.List2 = res.data;
    },
    async handler2(id) {
      this.List3 = [];
      this.categoryId.category3Id = "";
      const res = await this.$Api.attr.reqGetCategory3List(id);
      this.List3 = res.data;
    },
    async getCategroyList() {
      // 获取所有三级分类
      let { category1Id, category2Id, category3Id } = this.categoryId;
      const res = await this.$Api.attr.reqGetCategoryList(
        category1Id,
        category2Id,
        category3Id
      );
      this.$emit("getCategoryList", res.data, this.categoryId);
    },
  },
};
</script>

<style></style>
